<template>
  <div id="mapContainer" style="width: 100%; height: 179px">
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

onMounted(() => {
  AMapLoader.load({
    key: "1a1c9204431cc2452f24c291168f78a3", // 申请的高德key
    version: "2.0", // JS API版本
    plugins: ["AMap.Scale", "AMap.ToolBar"], // 需要使用的插件
  })
    .then((AMap) => {
      const map = new AMap.Map("mapContainer", {
        viewMode: "3D",
        zoom: 11,
        center: [106.577073, 29.510197],
      });

      // 添加插件
      map.addControl(new AMap.Scale());
      map.addControl(new AMap.ToolBar());

      // 添加标记点
      const marker = new AMap.Marker({
        position: [106.577073, 29.510197],
      });
      map.add(marker);
    })
    .catch((e) => {
      console.error("高德地图加载失败", e);
    });
});
</script>

<style lang="less" scoped>

</style>
